<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item style="width:240px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.uid" placeholder="操作人">
                        <el-option v-for="item in opareteMan" :key="item.user_id" :label="item.name" :value="item.user_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="操作类型">
                        <el-option v-for="(item,a) in oparetetype" :key="a" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.room_id" placeholder="房间号">
                        <!-- '0 = 待生成，1 = 待结算，2 = 已结算 -->
                        <el-option v-for="item in roomlist" :key="item.room_id" :label="item.room_name" :value="item.room_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.action" placeholder="功能">
                        <!-- '0 = 待生成，1 = 待结算，2 = 已结算 -->
                        <el-option v-for="item in funclist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.search" placeholder="描述"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="create_time" label="操作时间" fixed></el-table-column>
                <el-table-column prop="operate_username" label="操作人"></el-table-column>
                <el-table-column prop="type_cn" label="操作类型"></el-table-column>
                <el-table-column prop="room_name" label="房间号"></el-table-column>
                <el-table-column prop="source_cn" label="来源"></el-table-column>
                <el-table-column prop="action_cn" label="功能"></el-table-column>
                <el-table-column prop="description" label="操作描述"></el-table-column>
            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

    </div>
</template>
<style lang="scss">
.prizeBox{
    .el-form-item__content{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        .goodsearch{
            width:333px;
        }
        .quntanty{
            width:130px;
        }
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:1,
                date: abc.getpremonth()//currenMonth

            },
            roomlist:[],
            opareteMan:[],
            oparetetype:[
                //0=开机，1=关机，2=重启，3=全部重启，4=开房，5=关房，6=清扫，7=续费，8=换房，9=全部开机，10=全部关机
                {status:'0',status_cn:'开机'},
                {status:'1',status_cn:'关机'},
                {status:'2',status_cn:'重启'},
                {status:'3',status_cn:'全部重启'},
                {status:'4',status_cn:'开房'},
                {status:'5',status_cn:'关房'},
                {status:'6',status_cn:'清扫'},
                {status:'7',status_cn:'续费'},
                {status:'8',status_cn:'换房'},
                {status:'9',status_cn:'全部开机'},
                {status:'10',status_cn:'全部关机'},
            ],
            timerange:[],
            funclist:[
                //0=前台开房，1=设备检测，2=设备管理，3=前台关房
                {status:"0",status_cn:"前台开房"},
                {status:"1",status_cn:"设备检测"},
                {status:"2",status_cn:"设备管理"},
                {status:"3",status_cn:"前台关房"},
            ],

        }
    },
    mounted(){
        var that = this;
        that.getList()
        abc.get(that,potUrl.roomlists,{},(res)=> {
            that.roomlist = res.data
        })//f房间号-

        abc.get(that,potUrl.storeoperates,{},(res)=>{
            that.opareteMan =  res.data
        });//列表
        
    },
    methods:{
        search(){
            const that = this;
            console.log(that.timerange)
            if(that.timerange.length != 0){
                that.form.start_time = that.timerange[0]
                that.form.end_time = that.timerange[1]   
            }
            
            that.getList();
        },          
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
            that.getList()
        },
        getList(){
            const that = this;
            abc.get(that,potUrl.operateloglist,that.form,(res)=>{
                that.tableData = res.data.list;
                that.total = res.data.total;
            })
        }

    }
}

</script>